<!--
    模板文件

    author Yuanao
    date 2021年11月11日19:25:45
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>在线预约</title>

    <!-- css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/plugins/cubeportfolio/css/cubeportfolio.min.css">
    <link href="/css/nivo-lightbox.css" rel="stylesheet"/>
    <link href="/css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css"/>
    <link href="/css/owl.carousel.css" rel="stylesheet" media="screen"/>
    <link href="/css/owl.theme.css" rel="stylesheet" media="screen"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet">

    <!-- boxed bg -->
    <link id="bodybg" href="/bodybg/bg1.css" rel="stylesheet" type="text/css"/>
    <!-- template skin -->
    <link id="t-colors" href="/color/default.css" rel="stylesheet">
    <!--    -->
    <script src="/js/pageWriteHtml.js" charset="UTF-8"></script>
    <style>
        form {
            width: 500px;
            margin: 200px auto;
            padding: 20px;
            background-color: white;

        }

        form > h2 {
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<div id="wrapper">

    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsHead();</script>


    <form>
        <h2>用户注册</h2>
        <div class="form-group">
            <label for="name">用户名</label>
            <input type="text" class="form-control" id="name" name=""/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="form-group">
            <label for="sex">性别 </label>
            <select id="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="age">年龄</label>
            <input type="number" class="form-control" id="age" value="0">
        </div>
        <div class="form-group">
            <label for="phone">手机号</label>
            <input type="number" class="form-control" id="phone">
        </div>
        <button id="register" type="button" class="btn btn-primary">注 册</button>
        <button id="login" type="button" class="btn btn-info">返回登录</button>


    </form>


    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsFooter();</script>


</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>

<!-- Core JavaScript Files -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.appear.js"></script>
<script src="/js/stellar.js"></script>
<script src="/plugins/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/nivo-lightbox.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/contactform/contactform.js"></script>


<script>


    //登录按钮的点击事件
    $("#register").on("click", function (event) {
        let $name = $("#name");
        let $password = $("#password");
        let $sex = $("#sex");
        let $age = $("#age");
        let $phone = $("#phone");

        let name = $name.val();
        let password = $password.val();
        let sex = $sex.val();
        let age = $age.val();
        let phone = $phone.val();

        if (name == "" || password == "" || sex == "" || age == "" || phone == "") {
            alert("请填写所有值");
            return;
        }
        //发起网络请求
        $.post("http://localhost:8080/api/user/addUser", {
            name: name,
            password: password,
            sex: sex,
            age: age,
            phone: phone
        }, (data, status) => {
            console.log(data);

            if (status === "success" && data.code === 0) {
                //将数据存入本地存储中
                localStorage.setItem("user", JSON.stringify(data.data));
                alert("注册成功");
                document.location = "/index.html";  //回到首页
            } else {
                alert("注册失败,请重试");
            }

        });


    })

    //注册按钮的点击事件
    $("#login").on("click", function (event) {
        document.location = "./login.html";
    })


</script>

</body>

</html>
